import * as PIXI from 'pixi.js'
import { PixiComponent } from '@inlet/react-pixi'

export default PixiComponent('Rectangle', {
  create: () => new PIXI.Graphics(),
  didMount: () => {},
  willUnmount: () => {},
  applyProps: (instance, oldProps, newProps) => {
    instance.clear()
    const {
      edit, label, color, scale, active,
    } = newProps
    if (label.hide !== true || edit === true) {
      const point = label.exterior
      if (point.length === 2) {
        const topLeft = point[0]
        const rightBottom = point[1]
        const x = topLeft[0]
        const y = topLeft[1]
        const w = rightBottom[0] - topLeft[0]
        const h = rightBottom[1] - topLeft[1]
        instance.lineStyle(3 / scale, parseInt(color.substring(1), 16), 1)
        if (active === true) {
          instance.beginFill(0xffffff, 0.5)
        }
        instance.drawRect(x, y, w, h)
      }
    }
  },
})
